<template>
  <div class="table-wrap" ref="contentRef">
    <a-table
      :data-source="dataSource"
      :columns="columns"
      :row-key="rowKey"
      :pagination="false"
      :scroll="{ x: xScroll, y: 600 }"
    >
      <span
        v-for="(item, index) in slotName"
        :key="index"
        :slot="item"
        slot-scope="text, record"
      >
        <slot :name="item" :data="{ text, record }"></slot>
      </span>
      <span slot="operate" slot-scope="text, record, index">
        <span class="operate">
          <slot name="operation" :data="{ text, record, index }"></slot>
        </span>
      </span>
    </a-table>
  </div>
</template>
<script setup>
import {
  computed,
  defineEmits,
  defineProps,
  ref,
  onMounted,
  onUnmounted,
} from "vue";

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  mySelectedRowKeys: {
    type: Array,
    default: () => [],
  },
  rowKey: {
    type: [String, Function],
    default: "id",
  },
  slotName: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 0,
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
  roleType: {
    type: Boolean,
    default: false,
  },
  userMan: {
    type: Boolean,
    default: false,
  },
  userAdmin: {
    type: Boolean,
    default: false,
  },
  pageNo: {
    type: Number,
    default: 1,
  },
  userId: {
    type: String,
    default: "*****888",
  },
  pageSize: {
    type: Number,
    default: 10,
  },
});
const xScroll = computed(() => {
  return props.columns.length * 200;
});
const emits = defineEmits(["updateDeleteId"]);
function onSelectChange(selectedRowKeys, arrList) {
  emits("updateDeleteId", selectedRowKeys, arrList);
}
const contentRef = ref(null);
const maxHeight = ref(550);
function resizeView() {
  maxHeight.value = contentRef.value.clientHeight - 50;
}
onMounted(() => {
  maxHeight.value = contentRef.value.clientHeight - 50;
  window.addEventListener("resize", resizeView);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeView);
});
</script>
<style lang="less" scoped>
.table-wrap {
  width: 100%;
  margin-top: 15px;
  background-color: #fff;
  padding: 10px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  /deep/
    .ant-table-thead
    > tr.ant-table-row-hover:not(.ant-table-expanded-row)
    > td,
  /deep/
    .ant-table-tbody
    > tr.ant-table-row-hover:not(.ant-table-expanded-row)
    > td,
  /deep/ .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
  /deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
    //background: #f5f8ff;
  }
  /deep/ .ant-table-tbody > .hover > td {
    //background: #f5f8ff;
  }
  /deep/ .ant-table-tbody > tr > td {
    background-color: #fff;
    white-space: nowrap;
  }

  /deep/ .ant-table-thead {
    color: #333;
    background-color: #f1f1f4;
    tr {
      th {
        white-space: nowrap;
        background-color: #eaf0fe;
      }
    }
  }
}

/deep/ .operate {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  align-items: center;
  &-item {
    color: #1067ee;
    cursor: pointer;
    white-space: nowrap;
  }
  &-item:hover {
    text-decoration: underline;
  }
}
.table-paging {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/deep/ .ant-table-header.ant-table-hide-scrollbar {
  background-color: #eaf0fe;
}
/deep/ .ant-table-thead > tr > th {
  padding: 8px 16px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 8px 16px;
}
/deep/ .ant-table-body {
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
/deep/ .ant-table-body-inner {
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
</style>
